<template>
  <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="title" width="500" :center="true"
             :close-on-click-modal="false">
    <el-form ref="whitelistForm" :model="form" class="px-10" :rules="rules" label-width="90px" label-position="right">
      <el-form-item label="当前策略" prop="policyName">
        <el-input class="input-width" v-model="form.policyName" autocomplete="off" :disabled="true"/>
      </el-form-item>
      <el-form-item label="文件路径" prop="file">
        <el-input type="textarea" class="input-width mb-2.5" v-model="form.file" placeholder="最多可添加一个可执行程序"
                  :disabled="true" autocomplete="off"/>
        <el-button @click.stop="treeStore.directoryDialogVModel = true">浏览</el-button>
      </el-form-item>
      <el-form-item label="文件描述" prop="desc" v-if="treeStore.osType == 'win'">
        <el-input type="textarea" class="input-width" v-model="form.desc" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="queryForm">
          确认
        </el-button>
        <el-button @click="clear">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {useTreeStore} from "~/utils/pinia/tree.js"
// 树形组件pinia注册
const treeStore = useTreeStore()

const props = defineProps({
  form: {
    type: Object,
    default: {}
  },
  title: {
    type: String,
    default: '添加文件'
  }
})

const rules = reactive({
  file: [
    {required: true, message: "文件路径不能为空", trigger: "change"},
  ],
})
const whitelistForm = ref()
const dialogVisible = ref(false)
const clear = () => {
  dialogVisible.value = false;
  props.form.file = '';
  props.form.desc = '';
}
const emit = defineEmits(["AddhandleDialog"]);
const queryForm = () => {
  if (!whitelistForm) return
  whitelistForm.value.validate((valid, fields) => {
    if (valid) {
      if (!treeStore.treeDeviceId) {
        return
      }
      emit("AddhandleDialog");
      clear()
    }
  })
}
const dialogVisibleFn = (value) => {
  dialogVisible.value = value
}
defineExpose({dialogVisibleFn});
</script>

<style lang="scss" scoped>
:deep(.el-textarea__inner) {
  resize: none;
}
</style>